<template>
    <div class="login">
        <div class="loginBox">
            <div class="avatar">
                <img src="https://iconfont.alicdn.com/t/07a17828-2bf9-426b-a231-136965c4554d.png">
            </div>
            <el-form ref="loginFormRef" :model="formdata" label-width="70px" :rules="rules"   class="loginForm">
                <el-form-item label="用户名" prop="username">
                    <el-input type="text"  v-model="formdata.username" placeholder="请输入用户名"  suffix-icon="el-icon-user"></el-input>
                </el-form-item>
                <el-form-item label="密  码"  prop="password" >
                    <el-input type="password"  v-model="formdata.password" placeholder="请输入密码" suffix-icon="el-icon-view"></el-input>
                </el-form-item>
                 <el-form-item class="bottons">
                     <el-button type="primary" :plain="true" @click="onSubmit('loginFormRef')">登录</el-button>
                     <el-button type="info" @click="resetForm('loginFormRef')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    data() {
      return {
            formdata:{
                username:'',
                password:''
            },
            rules:{
                username: 
                    [
                        {required:true,message:'请输入用户名',trigger:'blur'},
                        {min:3,max:5,message:'长度在3到 5 个字符',trigger:'blur'}
                    ],
                password: 
                    [
                        {required:true,message:'请输入密码',trigger:'blur' },
                        {min:5,message:'不少于5个字符',trigger:'blur'}
                    
                    ]
                }
        }
    },
    methods: {
      onSubmit(loginFormRef) {
        this.$refs[loginFormRef].validate(async valid=>{
            if (!valid) return;
            let res=await this.$http.get('/api/login',{params:this.formdata});
            if(res.data.code==0){
                this.$message(
                    {
                        message:res.data.message,
                        type: 'success'
                    }
                )
                window.sessionStorage.setItem('token',res.data.token);
                this.$router.replace({path:'/home'});
            }else{
                 this.$message.error(res.data.message);
            }
        });
      },
       resetForm(loginFormRef) {
        this.$refs[loginFormRef].resetFields();
      }
    },
    
}
</script>

<style lang="stylus" scoped>
    .login
        background #3d4f9e
        height 100%
    .loginBox
        width 450px
        height 350px
        background #ffffff
        position  absolute
        top 50%
        left 50%
        transform translate(-50%,-50%)
        border-radius 20px
    .avatar
        width 60px
        height 60px
        border 1px solid #eeeeee
        border-radius 50%
        padding 5px
        box-shadow 0 0 10px #dddddd
        transform translate(-15%,-15%)
        background #ffffff
        img
            width 60px
            height 60px
            border-radius 50%
    .loginForm
        width 370px
        margin 0px auto
        padding-top 30px

        .bottons
            display flex
            flex-direction row
            justify-content center


</style>